<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
		<div id="web">
			<div class="lun_zy">
				<p class="zy_p a fl"><a><< 上一款</a></p>
				<p class="zy_p b fr"><a>下一款 >></a></p>
			</div>
			<div class="lun_bo">
				<ul class="lun_ul">
					<li><img src="img/lun1.png"/></li>
					<li><img src="img/lun2.png"/></li>
					<li><img src="img/lun1.png"/></li>
					<li><img src="img/lun2.png"/></li>
				</ul>
			</div>
			<div class="lun_p1">
				<p>
					左右滑动来选择一款您最喜欢的产品参与游戏吧！
					<span>(*点击图片来看看它们有什么不一样!)</span>
				</p>
			</div>
			<div class="box_nan">
					<div class="box_nan1 a fl">
						<a href="index.html"><p>返回</p></a>
					</div>
					<div class="box_nan1 b fr">
						<a href="loading.html"><p>确认选择</p></a>
					</div>
			</div>	
		</div>
		
		<script type="text/javascript">
			var a = document.getElementsByClassName("a")[0];
			var b = document.getElementsByClassName("b")[0];
			var ul = document.getElementsByClassName("lun_ul")[0];
			var li = ul.getElementsByTagName("li");
			
//			var clone1 = li[0].cloneNode(true);
////		    var clone2 = li[2].cloneNode(true);
//		    ul.appendChild(clone1);
////		    ul.insertBefore(clone2,li[0]);
			
			
			
			var index=0;
			a.addEventListener("touchstart",function(){
				index++;
				if(index<4){
					ul.style.marginLeft = -(index*320)+"px";
				}else{
					index=0;
					ul.style.marginLeft = (0*304)+"px";
				}
				
				
			})
			b.addEventListener("touchstart",function(){
				index++;
				if(index<3){
					ul.style.marginLeft = -(index*320)+"px";
				}else{
					index=0;
					ul.style.marginLeft = (0*304)+"px";
				}
				
				
			})
			
			
			
//			b.addEventListener("touchstart",function(){
//				index--;
//				if(index<5){
//					ul.style.marginLeft = (-index*324)+"px";
//				}else{
//					ul.style.marginLeft = (0*324)+"px";
//				}
//				
//				
//			})
			
			
			
			
			
			
			document.body.style.height  = window.innerHeight+"px";
		</script>
	</body>
</html>
